<template>
  <view class="content">
    <concern-banner ref="concern"></concern-banner>
    <view class="tips-box"> </view>
    <view class="info-box">
      <view class="info-block">
        <view class="tips-content">易朴阴盘奇门</view>
        <view class="section info-tips">
          <view>请填写信息</view>
        </view>
        <view class="section">
          <view class="section-title">起局时间：</view>
          <view class="section-content">
            <lunar-picker
              ref="lunarPicker"
              :date.sync="customFormData.date"
            ></lunar-picker>
          </view>
        </view>
        <view class="section">
          <view class="section-title">性别：</view>
          <view class="section-content">
            <uni-data-checkbox
              selectedColor="#000"
              selectedTextColor="#000"
              v-model="customFormData.sex"
              :localdata="sexs"
            />
          </view>
        </view>
        <view class="section">
          <view class="section-title">所排事项：</view>
          <view class="section-content">
            <input
              v-model="customFormData.issue"
              maxlength="30"
              class="name input_text"
              placeholder="(选填，限30字)"
            />
          </view>
        </view>
        <view class="btn-box">
          <view @click="bindQueryBazi('shi')" class="quiryButton">时盘排盘</view>
          <view @click="bindQueryBazi('ke')" class="quiryButton">刻盘排盘</view>
        </view>
      </view>
    </view>
    <activity-box :positionId="801"></activity-box>
    <yipu-logo></yipu-logo>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      sexs: [
        {
          text: "男",
          value: 0,
        },
        {
          text: "女",
          value: 1,
        },
      ],
      customFormData: {
        issue: "",
        date: [],
        sex: 0,
      },
    };
  },
  computed: {
    ...mapGetters({
      isConcern: "user/isConcern",
    }),
  },
  methods: {
    // 开始排盘
    bindQueryBazi: function (a) {
      // 判断用户是否登录并且关注,登录且关注后才可以开始排盘
      if (this.isConcern == true) {
        // 规则校验
        let validate = this.validData(this.customFormData);
        if (!validate) return false;
        let { issue, sex } = this.customFormData;
        // 获取日历的阳历时
        let result = this.$refs.lunarPicker.getSolarTime();
        let month = result.cMonth < 10 ? "0" + result.cMonth : result.cMonth;
        let day = result.cDay < 10 ? "0" + result.cDay : result.cDay;
        let isKe = a == "ke" ? 1 : 0;
        let url =
          "/pages/yinpan/result/result?" +
          "&issue=" +
          issue +
          "&sex=" +
          sex +
          "&year=" +
          result.cYear +
          "&month=" +
          month +
          "&day=" +
          day +
          "&hour=" +
          result.hour +
          "&minute=" +
          result.minute +
          "&isKe=" +
          isKe;
        console.log(url);
        uni.navigateTo({
          url: url,
        });
      } else {
        this.$refs.concern.concernPopup();
      }
    },
    // 数据验证
    validData(customFormData) {
      // 校验名字
      let { date } = customFormData;
      if (date.length < 5) {
        uni.showToast({
          title: "请选择出生日期",
          icon: "none",
        });
        return false;
      }
      return true;
    },
  },
};
</script>

<style>
.content {
  height: 100%;
  width: 100%;
}

.tips-box {
  height: 400rpx;
  background-color: #c6a680;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.tips-content {
  color: #c5a57e;
  height: 65rpx;
  width: 100%;
  margin-top: 56rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  font-weight: bold;
}

.info-box {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: -230rpx;
}

.info-block {
  background-color: #fff;
  width: 640rpx;
  height: fit-content;
  border-radius: 0rpx;
  box-shadow: 0 0 20rpx #666;
  display: flex;
  flex-direction: column;
  padding-bottom: 48rpx;
}

.section {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #000;
  margin-bottom: 24rpx;
}

.info-tips {
  margin: 58rpx 0;
}

.section-title {
  width: 160rpx;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  font-size: 32rpx;
  color: #32312e;
}

.section-content {
  width: 440rpx;
  height: 88rpx;
  box-sizing: border-box;
  font-size: 32rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 30rpx;
  border: 1px solid #dddddd;
}


.plural-section {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  height: 88rpx;
  justify-content: center;
}

.plural-title {
  height: 50%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.btn-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 32rpx 0 0;
}

.quiryButton {
  width: 521rpx;
  height: 78rpx;
  
  font-size: 32rpx;
  color: #fff;
  background-color: #1e1e1eff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 30rpx;
}

.input_text {
  font-size: 32rpx;
  white-space: nowrap;
}
.ad-box {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 30rpx;
}
.ad-content {
  width: 640rpx;
  height: 181rpx;
  box-shadow: 0 0 10rpx #666;
  background-color: #c6a680;
  border-radius: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ad-box-tips {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: #ffffff;
}
.tips-title {
  font-size: 36rpx;
}
.tips-des {
  font-size: 28rpx;
}
.ad-btn {
  width: 240rpx;
  height: 50rpx;
  background-color: #ffffff;
  border-radius: 25rpx;
  color: #4b240d;
  font-weight: bold;
  text-align: center;
  margin-top: 15rpx;
  font-size: 28rpx;
  line-height: 46rpx;
}
.logo-box {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-img {
  padding: 38rpx 0;
  width: 100rpx;
  height: 100rpx;
}
</style>
